<template>
  <div class="box">
    <div class="user">
      <el-avatar
        :size="100"
        :src="profileInfo.avatar?profileInfo.avatar:'https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/ignore-error/1'"
        class="avatar"
      />
      <h2>{{ profileInfo.account }}</h2>
      <h3 style="color: #f936a4">您还不是会员</h3>
      <h4>开通会员平均每年可省：￥9500</h4>
    </div>
    <el-row :gutter="20" justify="space-evenly" style="width: 100%;margin-top: 20px">
      <el-col :span="7" v-for="(item,index) in vipInfo" :key="item.id" style="width: 218px;margin-bottom: 30px"
              @click="changenum(index)">
        <div class="ep-bg-purple state" :class="indexNum===index?'active':''">
          <p>{{ item.data.title }}</p>
          <div style="margin: 15px auto">
            ￥<span style="font-size: 30px;">{{ item.data.price }}</span>
          </div>
          <p>{{ item.data.reduced ? `折合￥${item.data.reduced}` : '' }}</p>
        </div>
      </el-col>
    </el-row>
    <div class="paybtn" @click="open"><span>立即以{{ paynum }}元开通</span></div>
    <p style="font-size: 14px">开通即视为同意 <a href="https://www.dance365.com/vip-agreement" target="_blank"
                                          style="color: #fa3684;text-decoration:none">《会员服务协议》</a></p>
    <el-divider/>
    <h2 style="margin:0 0 20px -840px;font-size: 20px">会员专属权益</h2>
    <el-row :gutter="20" v-for="item in 3" :key="item" justify="space-evenly" style="width: 100%;">
      <el-col :span="4" v-for="item in 6" :key="item">
        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          popper-style=" border: 2px solid #fca9c4; padding: 20px; border-radius: 8px;"
        >
          <template #default>
            <el-avatar src="https://rs.dance365.com/member_preferential.png"
                       style="border: 1px solid #fca9c4;background-color:#fff;"/>
            <span>会员购买非会员专区标有会员“立减”金额的视频课、直播课、线下课等商品服务，可获会员专属立减优惠！</span>
            <span>会员优惠很省钱... 几十... 几千... 买的越多，省的越多！</span>
          </template>
          <template #reference>
            <div class="grid-content ep-bg-purple">
              <el-image class="image" l src="https://rs.dance365.com/member_preferential.png"></el-image>
              <span>非会员专区课程可获会员立减优惠</span>
            </div>
          </template>
        </el-popover>
      </el-col>
    </el-row>
    <el-divider style="margin-bottom: 50px"/>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, nextTick} from "vue";

export default defineComponent({
  name: "Vip"
})
</script>
<script lang="ts" setup>

import {reqInterestList, reqProfile, reqVip} from "@/api/profile";
import {nextTick, onMounted, ref, watch} from "vue";
import {ElMessage} from "element-plus";

const profileInfo = ref<any>({})
const vipInfo = ref<any>({})

onMounted(async () => {
  try {
    const re = await reqProfile()
    const re2 = await reqVip()
    const re3 = await reqInterestList()
    profileInfo.value = re.data
    vipInfo.value = re2.data
  } catch (e: any) {
    alert(e.message)
  }
})
const open = () => {
  ElMessage({
    showClose: true,
    message: '不会真以为我写支付了吧',
    type: 'success',
  })
}
const paynum = ref<number>(588)
const indexNum = ref<number>(1)
const changenum = (idx: number) => {
  indexNum.value = idx
  const re = vipInfo.value.find((item: any, index: number) => index === idx)
  nextTick(() => {
    paynum.value = re.date.price
  }).catch((e) => {
  })
}
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;

  .user {
    width: 300px;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;

    h2 {
      position: absolute;
      top: 20px;
      left: 120px;
      font-size: 20px;
      color: #000;
      font-weight: 500
    }

    h3 {
      position: absolute;
      top: 60px;
      left: 120px;
      font-size: 14px;
      font-weight: 400
    }

    h4 {
      font-size: 16px;
      font-weight: 400
    }
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    white-space: normal;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    border-radius: 8px;
    border: 1px solid #e3e3e3;

    .image {
      margin-top: 20px;
      width: 46px;
      height: 42px;
    }
  }

  .state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    border: 1px solid #b1b5c1;
    background-color: #ffffff;
    line-height: 1.15;
    cursor: pointer;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .active {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    height: 150px;
    border: 2px solid #f93684;
    background-color: #f9ebf1;
    color: #f93684;
    line-height: 1.15;
    cursor: pointer;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .paybtn {
    width: 330px;
    height: 46px;
    font-size: 16px;
    margin: 30px auto 12px;
    border-radius: 10px;
    background: linear-gradient(-56deg, #ff4683, #ff638f);
    color: #fff;
    cursor: pointer;
    padding: 9px 15px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    position: relative;

    span {
      position: absolute;
      top: 23px;
      left: 120px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
